<template>
  <a-spin :spinning="loading" tip="文档加载中...请稍后！">
    <section class="document-detail">
        <a-empty v-if="!loading && !documentContent" />
        <pre v-else v-html="documentContent" class="document-content"></pre>
      <a-tooltip placement="topLeft">
        <template slot="title">
          <span>编辑文档</span>
        </template>
        <a-button type="primary" @click="handlerEditDocument" shape="circle" icon="edit" v-if="isEditHelper" class="update-document-button"></a-button>
      </a-tooltip>
      
      <DocumentEdit ref="DocumentEdit" @update-success="() => getDocument()" />
    </section>
  </a-spin>
</template>

<script lang="ts">
import { Mixins, Component, Watch, Vue, Prop } from 'vue-property-decorator'
import { State, Mutation, Getter, namespace } from 'vuex-class'
import { helpServices } from '@/common/services/help'
import DocumentEdit from './DocumentEdit.vue'
import { permission } from '@/store/modules/permission'

@Component({
  components: {
    DocumentEdit
  }
})
export default class AdminList extends Vue {
  @Prop({
    type: String
  })
  public currentId!: string

  public documentContent: string = ''
  public loading = false

  public get isEditHelper() {
    return permission.isEditHelper
  }

  @Watch('currentId', { immediate: true })
  public handlerCurrentIdChange() {
    this.getDocument()
  }

  public getDocument() {
    this.loading = true
    helpServices.getDocument({
      power_id: this.currentId
    }).then(_ => {
      this.documentContent = ''
      this.documentContent = _.data.power_desc || ''
    }).finally(() => {
      this.loading = false
    })
  }

  public handlerEditDocument() {
    // @ts-ignore
    this.$refs.DocumentEdit.show(this.currentId, this.documentContent)
  }

  public mounted() {
  }
  
}
</script>

<style scoped lang="less">
.document-detail {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 60vh;
  width: 100%;
}

.update-document-button {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}
.document-content {
  /deep/ img {
    max-width: 100%;
  }
}
</style>
